import React from 'react'
import PropTypes from "prop-types";

// // 函数组件接收 通过参数传递
// export default function FunCom(props) {
//     const {name,age,msg} = props
//     return (
//         <div>
//             <h2>FunCom</h2>
//             <p>name: {name}</p>
//             <p>age: {age}</p>
//             <p>msg: {msg}</p>
//         </div>
//     )
// }

// 函数组件接收 通过参数传递 参数位置进行结构
// 外部数据时不可修改的 props 是只读的

function FunCom({name,age,msg,addAge}) {
    return (
        <div>
            <h2>FunCom</h2>
            <p>name: {name}</p>
            <p>age: {age}</p>
            <p>msg: {msg}</p>
            <p><button onClick={()=> addAge(5)}>年龄+5</button></p>
        </div>
    )
}
FunCom.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    msg: PropTypes.string
}
FunCom.defaultProps = {
    age:20,
    msg: '娃哈哈'
}
export default FunCom


